<!-- 右侧 -->
<template>
	<div class="header">

		<img class="img1" src="../../../assets/logo.png">

		<div class="box">
			<img class="img2" :src="require('../../../assets/' + items.avotor)"><!--webpack 并不会将它们解析 需要手动用require包裹 -->
			<nav>
				<a>{{ items.userName }}</a>
			</nav>
		</div>
	</div>
</template>
<script>
// import { menuAPI } from "@/api";
export default {
	data() {
		return {
			items: {
				avotor: "loginAvotor.png",
				userName: 'administrator'
			},
		}
	},
	created() {
		this.initData()
	},
	methods: {
		async initData() {
			//发起请求 获取菜单数据`
			// const { data: res } = await menuAPI();
			// this.items = res.date;
		},
	},

}
</script>
<style lang="less" scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	background-color: rgb(110, 179, 247);
	color: #ffffff;
}

.box {
	display: flex;
	align-items: center;
}

.img1 {
	width: 202px;
	height: 60px;
}

.img2 {
	width: 60px;
	height: 60px;
}

nav {
	display: flex;
	align-items: center;
	margin: 0px 40px;
	font: 16px Arial, Helvetica, sans-serif;
}
</style>